<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>css按钮</title>
    <style type="text/css">
    .button {
        background-color: #4CAF50;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
    }
    
    .button1 {
        display: inline-block;
        padding: 15px 25px;
        font-size: 24px;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        outline: none;
        color: #fff;
        background-color: #4CAF50;
        border: none;
        border-radius: 15px;
        box-shadow: 0 9px #999;
    }
    
    .button1:hover {
        background-color: #3e8e41
    }
    
    .button1:active {
        background-color: #3e8e41;
        box-shadow: 0 5px #666;
        transform: translateY(4px);
    }
    
    ul.pagination {
        display: inline-block;
        padding: 0;
        margin: 0;
    }
    
    ul.pagination li {
        display: inline;
    }
    
    ul.pagination li a {
        color: black;
        float: left;
        padding: 8px 16px;
        text-decoration: none;
        transition: background-color .3s;
        border: 1px solid #ddd;
        font-size: 18px;
    }
    
    ul.pagination li a.active {
        background-color: #eee;
        color: black;
        border: 1px solid #ddd;
    }
    
    ul.pagination li a:hover:not(.active) {
        background-color: #ddd;
    }
    </style>
</head>

<body>
    <h2>CSS 按钮</h2>
    <button>默认按钮</button>
    <a href="#" class="button">链接按钮</a>
    <button class="button">按钮</button>
    <input type="button" class="button" value="输入框按钮">
    <h2>按钮动画 - "按压效果"</h2>
    <button class="button1">Click Me</button>
    <p>上一页，下一页按钮:</p>
    <ul class="pagination">
        <li><a href="#">❮</a></li>
        <li><a href="#">❯</a></li>
    </ul>
    <p>分页导航:</p>
    <ul class="pagination">
        <li><a href="#" class="active">Home</a></li>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
</body>

</html>
